<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .big img {
            position: absolute;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }

    </style>
</head>
<body>
<div class="box" id="box">
    <div class="small">
        <img src="images/small.webp" width="350" alt=""/>

        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="images/big.jpg" width="800" alt=""/>
    </div>
</div>
<script src="common.js"></script>
<script>
    var box = my$('box');
    var smallBox = box.children[0];
    var bigBox = box.children[1];

    var smallImage = smallBox.children[0];
    var mask = smallBox.children[1];
    var bigImage = bigBox.children[0];


    // 1 鼠标经过的时候 显示 mask和bigBox ， 当鼠标离开box的时候隐藏mask和bigBox
    box.onmouseover = function () {
        // 显示 mask和bigBox
        mask.style.display = 'block';
        bigBox.style.display = 'block'
    }

    box.onmouseout = function () {
        mask.style.display = 'none';
        bigBox.style.display = 'none';
    }

    // 2 当鼠标在盒子中移动的时候，让mask和鼠标一起移动
    box.onmousemove = function (e) {
        e = e || window.event;
        // 获取鼠标在盒子中的位置，就是mask的坐标
        //var maseX = e.pageX - box.offsetLeft
        //var maseY = e.pageY - box.offsetTop
        var maskX = getPage(e).pageX - box.offsetLeft;
        var maskY = getPage(e).pageY - box.offsetTop;

        // 让鼠标出现在mask的中心点
        maskX = maskX - mask.offsetWidth / 2;
        maskY = maskY - mask.offsetHeight / 2;

        // 把mask限制到box中
        maskX = maskX < 0 ? 0 : maskX;
        maskY = maskY < 0 ? 0 : maskY;
        //mask最大能移动的距离
        var maskXMax = box.offsetWidth - mask.offsetWidth;
        var maskYMax = box.offsetHeight - mask.offsetHeight;
        maskX = maskX > maskXMax ? maskXMax : maskX;
        maskY = maskY > maskYMax ? maskYMax : maskY;

        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3 当mask移动的时候，让大图片移动

        // 大图片最大能够移动的距离
        var bigImgXMax = bigImage.offsetWidth - bigBox.offsetWidth;
        var bigImgYMax = bigImage.offsetHeight - bigBox.offsetHeight;
        //mask移动的距离 / mask最大能移动的距离 = 大图片移动的距离 / 大图片最大能够移动的距离
        //maskX / maskXMax = X / bigImgXMax

        var bigImgX = bigImgXMax * maskX / maskXMax;
        var bigImgY = bigImgYMax * maskY / maskYMax;

        bigImage.style.left = -bigImgX + "px";
        bigImage.style.top = -bigImgY + "px";

    }


</script>
</body>
</html>
